<template>
  <el-dialog
    v-model="visible"
    title="批量操作结果"
    width="600px"
    destroy-on-close
    :before-close="handleBeforeClose"
  >
    <div class="result-container">
      <div class="operation-status">
        <el-icon :size="24" class="status-icon">
          <CircleCheck v-if="result.success + result.already > 0" />
          <WarningFilled v-else-if="result.failed > 0" />
          <CircleClose v-else />
        </el-icon>
        <span class="status-text">
          {{ getOperationText() }}
        </span>
      </div>

      <!-- 统计信息 -->
      <el-card class="stats-card">
        <template #header>
          <span class="section-title">统计信息</span>
        </template>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-label">总计:</span>
            <span class="stat-value">{{ result.total || 0 }} 个维度</span>
          </div>
          <div class="stat-item success">
            <span class="stat-label">✅ 成功:</span>
            <span class="stat-value"
              >{{ result.success || 0 }} 个 (新{{ getOperationVerb() }})</span
            >
          </div>
          <div class="stat-item info">
            <span class="stat-label">ℹ️ 已{{ getOperationVerb() }}:</span>
            <span class="stat-value"
              >{{ result.already || 0 }} 个 (本来就是{{
                getOperationStatus()
              }}状态)</span
            >
          </div>
          <div class="stat-item error">
            <span class="stat-label">❌ 失败:</span>
            <span class="stat-value">{{ result.failed || 0 }} 个</span>
          </div>
        </div>
      </el-card>

      <!-- 详细结果 -->
      <el-card class="details-card">
        <template #header>
          <span class="section-title">详细结果</span>
        </template>
        <div class="details-list">
          <div
            v-for="(item, index) in result.details || []"
            :key="index"
            :class="`detail-item ${getItemStatusClass(item.status)}`"
          >
            <span class="status-indicator">{{
              getItemStatusIndicator(item.status)
            }}</span>
            <span class="item-name">{{ item.name }} ({{ item.code }})</span>
            <div class="item-message">
              操作: {{ item.message || "" }}
              <div v-if="item.reason" class="item-reason">
                原因: {{ item.reason }}
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button
        v-if="result.failed > 0"
        type="default"
        @click="emit('retry-failed')"
      >
        重新尝试失败项
      </el-button>
      <el-button type="text" @click="handleViewLog"> 查看日志 </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  CircleCheck,
  WarningFilled,
  CircleClose,
} from "@element-plus/icons-vue";

// 定义属性和事件
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  result: {
    type: Object,
    default: () => ({
      total: 0,
      success: 0,
      failed: 0,
      already: 0,
      details: [],
    }),
  },
  operation: {
    type: String,
    default: "", // 'enable', 'disable', 'delete'
    validator: (value) => ["", "enable", "disable", "delete"].includes(value),
  },
});

const emit = defineEmits(["retry-failed", "update:modelValue"]);

// 响应式数据
const visible = ref(props.modelValue);

// 监听显示状态变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);

// 获取操作文本
const getOperationText = () => {
  const textMap = {
    enable: "批量启用完成",
    disable: "批量禁用完成",
    delete: "批量删除完成",
  };
  return textMap[props.operation] || "批量操作完成";
};

// 获取操作动词
const getOperationVerb = () => {
  const verbMap = {
    enable: "启用",
    disable: "禁用",
    delete: "删除",
  };
  return verbMap[props.operation] || "操作";
};

// 获取操作状态
const getOperationStatus = () => {
  const statusMap = {
    enable: "启用",
    disable: "禁用",
  };
  return statusMap[props.operation] || "";
};

// 获取项目状态类
const getItemStatusClass = (status) => {
  const classMap = {
    success: "success",
    failed: "error",
    already: "info",
  };
  return classMap[status] || "";
};

// 获取项目状态指示器
const getItemStatusIndicator = (status) => {
  const indicatorMap = {
    success: "✅",
    failed: "❌",
    already: "ℹ️",
  };
  return indicatorMap[status] || "";
};

// 查看日志
const handleViewLog = () => {
  // 实际应用中可以打开日志详情页面
  ElMessage.info("日志查看功能待实现");
};

// 关闭
const handleClose = () => {
  emit("update:modelValue", false);
};

// 关闭前处理
const handleBeforeClose = () => {
  emit("update:modelValue", false);
  return true;
};
</script>

<style scoped lang="scss">
.result-container {
  padding: 5px 0;
}

.operation-status {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;

  .status-icon {
    margin-right: 10px;
    color: #52c41a;
  }

  .status-text {
    font-size: 16px;
    font-weight: 500;
    color: #1d2129;
  }
}

::v-deep .status-icon >>> .el-icon-warning-filled {
  color: #faad14;
}

::v-deep .status-icon >>> .el-icon-circle-close {
  color: #f5222d;
}

.stats-card,
.details-card {
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.section-title {
  font-weight: 500;
  color: #1d2129;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 5px 0;
}

.stat-item {
  padding: 8px;
  border-radius: 4px;
  background-color: #f9f9f9;

  .stat-label {
    display: inline-block;
    width: 80px;
    color: #86909c;
  }

  .stat-value {
    font-weight: 500;
  }
}

.stat-item.success {
  background-color: #f6ffed;

  .stat-value {
    color: #52c41a;
  }
}

.stat-item.info {
  background-color: #e6f7ff;

  .stat-value {
    color: #1890ff;
  }
}

.stat-item.error {
  background-color: #fff1f0;

  .stat-value {
    color: #f5222d;
  }
}

.details-list {
  max-height: 300px;
  overflow-y: auto;
}

.detail-item {
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: #f9f9f9;

  .status-indicator {
    display: inline-block;
    width: 24px;
  }

  .item-name {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
  }

  .item-message {
    font-size: 13px;
    color: #666;
    margin-left: 24px;
  }

  .item-reason {
    margin-top: 3px;
    color: #f5222d;
  }
}

.detail-item.success {
  background-color: #f6ffed;
  border-left: 3px solid #52c41a;
}

.detail-item.info {
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

.detail-item.error {
  background-color: #fff1f0;
  border-left: 3px solid #f5222d;
}
</style>
